<template>
  <div style='height: calc(100vh - 120px)'>
    <div class='topSearch'>
      <a-form-model ref='ruleForm' layout='inline' :model='filterForm'>
        <!-- 生产人员，模糊搜索 -->
        <a-form-model-item>
          工单：<a-input v-model='filterForm.orderIdText' style="width: 200px;" @click="outopenIt" placeholder="请选择"
            :read-only="true" />
        </a-form-model-item>
        <a-button @click='handleShowFilter' style='margin-top: 4px' icon='filter'>筛选 <span class='filter-num'
            style='margin-left: 5px'>{{ ' ' + filteredNums }}</span></a-button>
      </a-form-model>
    </div>
    <!-- 头部模块 -->
    <a-card :bordered='false'>
      <div class='topBox'>
        <div class='itemBox' v-for='(item, index) in topArray' :key='index'>
          <div class='rightBox'>
            <div class='rightBot'>{{ item.title }}</div>
            <div class='rightTop'>{{ item.number }}</div>
          </div>
        </div>
      </div>
    </a-card>
    <a-card :bordered='false' style='height: calc(100vh - 390px)'>
      <!-- 操作按钮区域 -->
      <div class='table-operator right-btn' style='margin-bottom: 0px'>
        <a-button @click='showColumn' icon='unordered-list' style='margin-right: 10px'> 设置列</a-button>
        <!-- <a-button @click='handleExport(selectedRows)' type="primary" style='float: right' class='btns'>导出</a-button> -->
        <PubExport style='float: right' type="primary" exportUrl="/salary/statistics/orderExport" :columns="columns"
          :propForm="propForm()" :selectedRows="selectedRows" :sortForm="sortForm" :fullName="fullName"
          v-if="hasButton('ordercost:export')" />
      </div>
      <div>
        <a-table row-key='orderId' :key='tableKey' size='middle' :scroll="{ x: scrollX, y: 'calc(100vh - 520px)' }"
          :hideDefaultSelections='false' :columns='columns' :dataSource='modelList' :pagination='false'
          @change='tableChange'
          :row-selection="{ selectedRowKeys: selectedRowKeys, columnTitle: ' ', onChange: onSelectChange }"
          class='j-table-force-nowrap' :components="drag(columns, 'WORK_ORDER_COST_COM')">
          <span slot='actions' slot-scope='text, record'>
            <span style="display: flex;justify-content: center">
              <a-button type="link" @click='handleDetail(record)' v-if="hasButton('ordercost:detail')">详情</a-button>
              <PubExport btnType="link" icon="none" :showAll="false" exportUrl="/salary/statistics/detailExport"
                :columns="detailColumns" :propForm="{ ...propForm(), orderId: record.orderId }" :selectedRows="[]"
                :sortForm="sortForm" :fullName="record.orderCode + '计件工资明细表'" v-if="hasButton('ordercost:export')" />
            </span>
          </span>
          <!-- 输入框搜索 -->
          <div slot='searchInput' slot-scope='{ selectedKeys, confirm, clearFilters, column }' class='searchWorkOreder'>
            <a-input placeholder='请输入' v-model='filterForm[column.dataIndex]' style='width: 188px; display: block'
              @pressEnter='handleSearch' />
            <a-button type='primary' style='width: 80px; margin-left: 20px; display: block'
              @click='() => handleSearch(selectedKeys, confirm, column.dataIndex, clearFilters)'>
              搜索
            </a-button>
          </div>
          <a-icon slot='searchIcon' slot-scope='filtered' type='search'
            :style="{ color: filtered ? '#108ee9' : undefined }" />
          <a-icon slot='selectIcon' slot-scope='filtered' type='filter'
            :style="{ color: filtered ? '#108ee9' : undefined }" />
          <!-- 日期搜索 -->
          <div slot='datePicker' slot-scope='{ confirm, clearFilters, column }' class='searchWorkOreder'>
            <a-range-picker style='width: 188px' v-model='dateForm[column.dataIndex]' format='YYYY-MM-DD'
              :placeholder="['开始时间', '结束时间']" @change='(v) => onOk(v, column.dataIndex)' />
            <a-button type='primary' style='width: 80px; margin-left: 20px; display: block'
              @click='() => handleSearch(confirm, column.dataIndex, clearFilters)'>
              搜索
            </a-button>
          </div>
          <a-icon slot='dateIcon' slot-scope='filtered' type='filter'
            :style="{ color: filtered ? '#108ee9' : undefined }" />
        </a-table>
      </div>
      <SetColumn columnName='设置列' ref='SetColumn' v-if='showSetColumn' @sureBtn='sureBtn'
        @cancelBtn='showSetColumn = false' />
    </a-card>
    <a-drawer placement='right' width='500' :visible='showFilter' @close='closeFilter'>
      <div class='filter-body'>
        <div slot='title' class='uni-card filter-tit'>
          筛选 <span class='filter-num'>{{ filteredNums }}</span>
        </div>
        <div class='uni-card' v-if='filteredNums > 0' style='background: #fff'>
          <div v-for='(item, i) in filteredList' :key='i' v-show='item.text' class='tag-wrap'>
            <span class='filter-tag' @click='delFiltered(item.key)'>
              <span class='tag-text'>{{ `${item.title}：${item.text}` }}</span>
              <a-icon type='close' style='float: right' />
            </span>
          </div>
        </div>
        <div style='overflow-y: scroll; flex: 1; padding: 0'>
          <div class='uni-card' style='background: #fff'>
            <a-form-model ref='ruleForm' layout='vertical' :model='filterForm'>
              生产工单：<a-input v-model='filterForm.orderIdText' style="width: 200px;" @click="outopenIt" placeholder="请选择"
                :read-only="true" />
            </a-form-model>
          </div>
        </div>
        <div class='footer-submit'>
          <a-button class='margin-btn' @click='resetFilter'>重置</a-button>
          <a-button type='primary' @click='handleFilter'>确定</a-button>
        </div>
      </div>
    </a-drawer>
    <!-- 全选/分页 -->
    <div class='uni-card pagination-contian' :style="{ left: collapsed ? '199px' : '70px' }">
      <div style='display: inline-block'>
        <a-checkbox :indeterminate='listIndeterminate' :checked='listCheckAll' @change='onCheckAllChange'></a-checkbox>
        <span style='margin-left: 8px'>
          {{ `已选 ${selectedRowKeys.length}/${total} 项` }}
          <span @click='clearArr' class='pubColor' style='margin: 0 10px'>清空</span>
        </span>
      </div>
      <div style='display: inline-block; float: right'>
        <a-pagination :total='total' v-model='current' :page-size-options='pageSizeOptions' :page-size='pageSize'
          @change='onChangePage' @showSizeChange='onShowSizeChange' show-quick-jumper show-size-changer />
      </div>
    </div>
    <salaryDetail ref='salaryDetail' :formData="filterForm"></salaryDetail>
    <goodsTableSelect ref="SaleSelect" @getSelectValue="getSaleSelectValue" :key="Selectindex"></goodsTableSelect>
  </div>
</template>
<script>
import SetColumn from '@/pubComponent/SetColumn.vue'
import crumbs from '@/components/crumbs.vue'
import goodsTableSelect from '@/components/goodsTableSelect'
import { getNewColumns, subStrText, commafyTofixed, formatDate } from '@/utils/util'
import { tableMixinReport } from '@/mixins/tableMixinReport'
import moment from 'dayjs'
import { downFilePost } from '@/api/manage'
import { mapState } from 'vuex'
import { TreeSelect } from 'ant-design-vue'
import PubExport from '@/components/pubBtn/PubExport.vue'
import tableDragResize from '@/mixins/tableDragResize'
import { salaryApi } from '@/api/modiuesLX/pieceWage'
import { hasButton } from '@/utils/hasPermission'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
const treeData = []
// 表头
const columnsValue = [
  {
    title: '工单编号',
    ellipsis: true,
    dataIndex: 'orderCode',
  },
  {
    title: '物品名称',
    ellipsis: true,
    dataIndex: 'goodsName',
  },
  {
    title: '合格数',
    dataIndex: 'qualifiedNumStr',
    scopedSlots: {
      customRender: 'qualifiedNumStr'
    }
  },
  {
    title: '不合格数',
    dataIndex: 'unqualifiedNumStr',
    scopedSlots: {
      customRender: 'unqualifiedNumStr'
    }
  },
  {
    title: '计件工资',
    dataIndex: 'salaryStr',
    ellipsis: true,

  },
]
const actionArr = [
  {
    title: '操作',
    align: 'center',
    dataIndex: 'actions',
    width: 110,
    scopedSlots: { customRender: 'actions' },
  },
]
let startDate = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
let endDate = moment().format('YYYY-MM-DD HH:mm:ss')
export default {
  mixins: [tableDragResize, tableMixinReport],
  data() {
    return {
      actionArr,
      selectExportTitle: '',
      selectExportVisiable: false, // 导出弹窗
      selectExportParam: {}, // 导出参数
      filedKeys: '', // 导出字段
      fileName: '', // 导出文件名
      Selectindex: 0,
      SHOW_PARENT,
      //   treeSelectLael: '',
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id'
      },
      detailColumns: [
        {
          title: '关联工单',
          dataIndex: 'orderCode',
          key: 'orderCode',
          width: 170,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'orderCode'
          }
        },
        {
          title: '物品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
          width: 120,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'goodsName'
          }
        },
        {
          title: '工序',
          dataIndex: 'processName',
          key: 'processName',
          width: 120,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'processName'
          }
        },
        {
          title: '合格数 ',
          dataIndex: 'qualifiedNumStr',
          key: 'qualifiedNumStr',
          width: 120,
          ellipsis: true
        },
        {
          title: '不合格数',
          dataIndex: 'unqualifiedNumStr',
          key: 'unqualifiedNumStr',
          width: 120,
          ellipsis: true
        },
        {
          title: '计件单价',
          dataIndex: 'priceStr',
          key: 'priceStr',
          width: 120,
          ellipsis: true
        },
        {
          title: '计件工资',
          dataIndex: 'salaryStr',
          key: 'salaryStr',
          width: 120,
          ellipsis: true
        },
        {
          title: '生产人员',
          dataIndex: 'userName',
          key: 'userName',
          width: 120,
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'processesName'
          }
        },
        {
          title: '报工时间',
          dataIndex: 'reportTime',
          key: 'reportTime',
          width: 180,
          ellipsis: true,

        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          key: 'createBy',
          width: 120,
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'createBy'
          }
        },
        {
          title: '更新人',
          dataIndex: 'updateBy',
          key: 'updateBy',
          width: 120,
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'updateBy'
          }
        },

      ],
      // 头部按月搜索
      monthEnd: '',
      monthStart: '',
      now: null,
      // 头部配置
      topArray: [
        {
          title: '工单成本（元）',
          number: '0'
        },
        {
          title: '合格数',
          number: '0'
        },
        {
          title: '不合格数',
          number: '0'
        }
      ],

      typeList: [], //类型 字典值下拉数据
      dictOptionsDeviceCategory: [], //设备类别字典值下拉数据
      commafyTofixed,
      moment,
      selectedRowKeys: [],
      selectedRows: [],
      subStrText,
      showFilter: false, // 筛选抽屉
      modelList: [], // 列表数据
      showSetColumn: false, // 显示
      //全选按钮
      listIndeterminate: false,
      listCheckAll: false,
      current: 1,
      total: 0,
      pageSize: 30,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      columnsValue,
      fullName: '',
      orderColumns: [
        {
          title: '工单编号',
          dataIndex: 'orderCode',
          searchIndex: 'orderCode',
          ellipsis: true,
          align: 'left',
          fixed: 'left',
          width: 200,
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'orderCode',
          },
        },
        {
          title: '物品编号',
          dataIndex: 'serialNumber',
          searchIndex: 'serialNumber',
          ellipsis: true,
          width: 200,
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'serialNumber',
          },
        },
        {
          title: '物品名称',
          dataIndex: 'serialName',
          searchIndex: 'serialName',
          ellipsis: true,
          width: 200,
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'serialName',
          },
        },
        {
          title: '规格',
          dataIndex: 'serialSpecifications',
          searchIndex: 'serialSpecifications',
          ellipsis: true,
          width: 200,
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'serialSpecifications',
          },
        },
        {
          title: '状态',
          dataIndex: 'orderStatusText',
          ellipsis: true,
          width: 200,
          scopedSlots: {
            // filterDropdown: 'selectDropdown',
            // filterIcon: 'selectIcon',
            // customRender: 'orderStatusText',
          },
        },

        {
          title: '单位',
          dataIndex: 'unitName',
          ellipsis: true,
          width: 200,
          scopedSlots: {

          }
        },
        {
          title: '计划生产数量',
          dataIndex: 'planProduceNum',
          ellipsis: true,
          width: 200,
          scopedSlots: {

          }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
          width: 200,
          sorter: true,
          scopedSlots: {
          },
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          ellipsis: true,
          width: 200,
          sorter: true,
          scopedSlots: {
            // filterDropdown: 'selectDropdown',
            // filterIcon: 'searchIcon',
            // customRender: 'updateTime',
          },
        },
        {
          title: '创建人',
          dataIndex: 'createByText',
          searchIndex: 'createBys',
          ellipsis: true,
          width: 200,
          scopedSlots: {
            filterDropdown: 'selectPeople1',
            filterIcon: 'dateIcon',
            customRender: 'createByText',
          },
        },
        {
          title: '更新人',
          dataIndex: 'updateByText',
          searchIndex: 'updateBys',
          ellipsis: true,
          width: 200,
          scopedSlots: {
            filterDropdown: 'selectPeople2',
            filterIcon: 'dateIcon',
            customRender: 'updateByText',
          },
        },
      ],
      columns: [
        {
          title: '工单编号',
          ellipsis: true,
          dataIndex: 'orderCode',
        },
        {
          title: '物品名称',
          ellipsis: true,
          dataIndex: 'goodsName',
        },
        {
          title: '合格数',
          dataIndex: 'qualifiedNumStr',
          scopedSlots: {
            customRender: 'qualifiedNumStr'
          }
        },
        {
          title: '不合格数',
          dataIndex: 'unqualifiedNumStr',
          scopedSlots: {
            customRender: 'unqualifiedNumStr'
          }
        },
        {
          title: '计件工资',
          dataIndex: 'salaryStr',
          ellipsis: true,
        },
      ],
      filterForm: {
        orderId: '',
        orderIdText: ''
      },
      filteredFormLable: {
        orderId: '生产工单',
      },
      sortForm: {
        sortType: '',
        sortColumn: ''
      },
      dateForm: {
        reportTime: [startDate, endDate]
      } /* 筛选日期绑定对象 */,
      customSelectList: [],
      applyStatusList: [],
      dealStatusList: [],
      loginUser: '',
      tableKey: 1.9
    }
  },
  components: {
    SetColumn,
    crumbs,
    PubExport,
    goodsTableSelect,
    salaryDetail: (resolve) => require(['@/views/workManagement/productionReport/components/salaryDetail'], resolve)
  },
  computed: {
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    },
    ...mapState({
      collapsed: (state) => state.user.collapsedAno
    }),
    filteredList() {
      let list = []
      for (let key in this.filterForm) {
        if (key == 'orderId') {
          list.push({
            title: this.filteredFormLable[key],
            text: this.filterForm.orderIdText,
            key
          })
        }
      }
      return list
    },
    filteredNums() {
      let nums = 0
      for (let key in this.filterForm) {
        if (this.filterForm[key] != '' && this.filterForm[key] != null && this.filterForm[key] != undefined) {
          console.log(key, '000')
          nums += 1
          if (key == 'orderIdText') {
            nums -= 1
          }
        }
      }
      return nums
    }
  },
  created() {
    let user = localStorage.getItem('pro__Login_Userinfo')
    this.loginUser = JSON.parse(user).value.id
    this.initData()
    this.requestData()
  },
  methods: {
    hasButton,
    getSaleSelectValue(id, text, item) {
      console.log(id, text, item)

      if (!id) {
        this.filterForm.orderId = ''
        this.filterForm.orderIdText = ''
        return
      }
      this.Selectindex += 1 //重置组件去除表格默认勾选数据，让自己赋值的数据回显（重要！！！）
      this.filterForm.orderId = id
      this.filterForm.orderIdText = item[0].orderCode
      this.requestData()
    },
    outopenIt() {
      let par = {
        list: '/produceorder/produceOrderInfo/list',
        visible: true, //弹窗开启
        title: '生产工单', //标题名称
        multi: false, //是否多选
        columns: this.orderColumns, //表格配置
        value: this.filterForm.orderId, //需要回显的数据，如：id:'12323213,321312312,321312312'
        valueKey: 'id', //需要拿到数据的key，如：id，userId等
        text: '工单编号', //回显的中文，如：'张三'
        textKey: 'id', //回显的中文key
        action: 'post',
        argument: {
          // orderStatuss: '1',
        },
      }
      this.$refs.SaleSelect.getInit(par)
    },
    propForm() {
      let params = {
        pageNo: this.current,
        pageSize: this.pageSize,
        userName: this.filterForm.userName,
        fileName: this.fullName
      }
      return params
    },
    // 限制开始日期
    disabledStartDate(current) {
      let nowMon = new Date()
      if (moment(nowMon).isBefore(moment(current))) {
        return true
      }
      return false
    },
    // 导出
    handleExport(e) {
      let that = this
      // 获取动态列
      let filedKeysList = []
      that.columns.forEach((item) => {
        // if (item.dataIndex == 'category') {
        //   item.dataIndex = 'categoryText'
        // }
        filedKeysList.push(item.dataIndex)
      })
      // filedKeysList.pop()//删除最后一个的操作列
      that.filedKeys = filedKeysList.join(',')
      //设置文件名
      if (this.filterForm.reportTimeBegin) {
        that.fileName = `${formatDate(this.filterForm.reportTimeBegin, 'YYYY-MM-DD')}~${formatDate(
          this.filterForm.reportTimeEnd,
          'YYYY-MM-DD'
        )} 产量统计`
      } else {
        that.fileName = '产量统计'
      }
      if (!e || e.length === 0) {
        that.handleExportAll()
        that.selectExportVisiable = false
      } else {
        that.selectExportTitle = `已选中${e.length}条数据`
        that.selectExportVisiable = true
        let parameter = {
          startTime: this.filterForm.reportTimeBegin,
          endTime: this.filterForm.reportTimeEnd,
          month: '',
          ...this.filterForm
        }
        // delete parameter.reportTime
        // delete parameter.reportTimeBegin
        // delete parameter.reportTimeEnd
        that.selectExportParam = {
          ...parameter,
          ...that.sortForm,
          selectedList: e,
          fileName: that.fileName, //文件名
          filedKeys: that.filedKeys //动态列
        }
        // 删除that.selectExportParam中的空子段
        for (let key in that.selectExportParam) {
          if (
            that.selectExportParam[key] == '' ||
            that.selectExportParam[key] == null ||
            that.selectExportParam[key] == []
          ) {
            delete that.selectExportParam[key]
          }
        }
      }
    },
    handleSelectExport() {
      this.selectExportVisiable = false
      downFilePost('/report/production/exportProductionXls', this.selectExportParam).then((data) => {
        if (data.type == 'application/json') {
          const reader = new FileReader() //创建一个FileReader实例
          reader.readAsText(data, 'utf-8') //读取文件,结果用字符串形式表示
          reader.onload = function () {
            //读取完成后,**获取reader.result**
            const msg = JSON.parse(reader.result)
            this.$antdMessage.error(msg.message) //弹出错误提示
          }
          return
        }
        if (!data) {
          this.$antdMessage.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), this.fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', this.fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    handleExportAll() {
      let that = this
      that.selectExportVisiable = false
      that.$antdConfirm({
        title: `导出`,
        content: `确定全部数据?`,
        onOk() {
          let parameter = {
            startTime: that.filterForm.reportTimeBegin,
            endTime: that.filterForm.reportTimeEnd,
            month: '',
            ...that.filterForm
          }
          delete parameter.reportTime
          delete parameter.reportTimeBegin
          delete parameter.reportTimeEnd
          let param = {
            ...parameter,
            ...that.sortForm,
            fileName: that.fileName,
            filedKeys: that.filedKeys
          }
          // 删除param中的空子段
          for (let key in param) {
            if (param[key] == '' || param[key] == null || param[key] == undefined || param[key] == []) {
              delete param[key]
            }
          }
          console.log(param, '导出选中数据param')
          downFilePost('/report/production/exportProductionXls', param).then((data) => {
            if (data.type == 'application/json') {
              const reader = new FileReader() //创建一个FileReader实例
              reader.readAsText(data, 'utf-8') //读取文件,结果用字符串形式表示
              reader.onload = function () {
                //读取完成后,**获取reader.result**
                const msg = JSON.parse(reader.result)
                that.$antdMessage.error(msg.message) //弹出错误提示
              }
              return
            }
            if (!data) {
              that.$antdMessage.error('导出失败')
              that.selectExportVisiable = false
              return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
              window.navigator.msSaveBlob(new Blob([data]), that.fileName + '.xls')
              that.selectExportVisiable = false
            } else {
              let url = window.URL.createObjectURL(new Blob([data]))
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', that.fileName + '.xls')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) //下载完成移除元素
              window.URL.revokeObjectURL(url) //释放掉blob对象
              that.selectExportVisiable = false
            }
          })
        },
        onCancel() {
        }
      })
    },
    /* 出入库日期选择 */
    onOk(value, key) {
      if (value.length == 0) {
        this.filterForm[`reportTime`] = ''
        this.handleSearch()
        return
      }
      this.handleSearch()
    },
    // 排序
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      console.log('看看这是啥33：', sorter)
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm = {
          sortType: sortType,
          sortColumn: sorter.columnKey
        }
        this.requestData()
      } else {
        this.sortForm = {
          sortType: '',
          sortColumn: ''
        }
        this.requestData()
      }
    },
    // table选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.checkBoxStatus()
    },
    // 全选
    // onCheckAllChange(e) {
    //   if (e.target.checked) {
    //     for (let item of this.modelList) {
    //       this.selectedRowKeys.push(item.id)
    //     }
    //   } else {
    //     for (let item of this.modelList) {
    //       this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
    //         return each != item.id
    //       })
    //     }
    //   }
    //   this.checkBoxStatus()
    // },
    // 全选
    onCheckAllChange(e) {
      if (e.target.checked) {
        for (let item of this.modelList) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.orderId
          })
          this.selectedRowKeys.push(item.orderId)
          this.selectedRows = this.selectedRows.filter((each) => {
            return each.orderId != item.orderId
          })
          this.selectedRows.push(item)
        }
      } else {
        for (let item of this.modelList) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.orderId
          })
          this.selectedRows = this.selectedRows.filter((each) => {
            return each.orderId != item.orderId
          })
        }
      }
      this.checkBoxStatus()
    },
    // 清空
    clearArr() {
      this.selectedRowKeys = []
      this.selectedRows = []
      this.checkBoxStatus()
    },
    checkBoxStatus() {
      if (this.selectedRowKeys.length == 0) {
        this.listIndeterminate = false
        this.listCheckAll = false
      } else {
        let tableIds = []
        for (let item of this.modelList) {
          tableIds.push(item.orderId)
        }
        let checkValue = this.isInclude(tableIds, this.selectedRowKeys)
        if (checkValue) {
          this.listIndeterminate = false
          this.listCheckAll = true
        } else {
          this.listIndeterminate = true
          this.listCheckAll = false
        }
      }
    },
    isInclude(aa, bb) {
      return aa.every((item) => {
        return bb.some((sub) => {
          return sub === item
        })
      })
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData(true)
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData(true)
    },
    handleSearch(selectedKeys, confirm, dataIndex, clearFilters) {
      this.current = 1
      this.requestData()
    },
    /* 打开筛选 */
    handleShowFilter() {
      this.showFilter = true
    },
    /* 关闭筛选 */
    closeFilter() {
      this.showFilter = false
    },
    /* 确定筛选 */
    handleFilter() {
      this.handleSearch()
      this.showFilter = false
    },
    /* 删除已选 */
    delFiltered(key) {
      console.log(key, 'key')
      this.filterForm[key] = undefined
      this.filterForm.orderIdText = ''
    },
    /* 重置筛选 */
    resetFilter() {
      this.filterForm = {
        reportTime: [startDate, endDate],
        userName: ''
      }
      //   this.treeSelectLael = ''
      // this.dateForm = {}
      this.handleSearch()
    },
    /* 初始/加载设置列 */
    initData() {
      var oldValue = localStorage.getItem(this.BUSI_CONST.Entity.WORK_ORDER_COST_COM)
      this.columns = getNewColumns(this.columnsValue, JSON.parse(oldValue), actionArr, this.columns)

      this.fullName = '工单成本'

    },

    /* 请求列表数据 */
    requestData(check) {
      let parameter = {
        pageNo: this.current,
        pageSize: this.pageSize,
        orderId: this.filterForm.orderId
      }
      console.log('parameter', parameter)
      salaryApi.orderList(parameter).then((res) => {
        if (res.code == 200) {
          if (res.result.total) {
            this.total = res.result.total
          } else {
            this.total = 0
          }
          this.modelList = res.result.records
        }
      })

      salaryApi.orderSum(parameter).then((res) => {
        if (res.code == 200) {
          this.topArray[0].number = res.result.numStr || '0'
          this.topArray[1].number = res.result.qualifiedNumStr || '0'
          this.topArray[2].number = res.result.unqualifiedNumStr || '0'
        }
      })
    },
    /* 打开设置列面板 */
    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        this.$refs.SetColumn.paramsData(this.columnsValue, this.BUSI_CONST.Entity.WORK_ORDER_COST_COM, this.columns)
      })
    },
    /* 设置列 */
    sureBtn(emitArr) {
      this.columns = getNewColumns(this.columnsValue, emitArr, [])
      console.log(this.columns)
      localStorage.setItem(this.BUSI_CONST.Entity.WORK_ORDER_COST_COM, JSON.stringify(emitArr), actionArr)
      this.tableKey += 1
    },
    /* 详情 */
    handleDetail(v) {
      v.queryId = v.orderId
      v.queryType = 2
      this.$refs.salaryDetail.initDetail(v)
    },
    //点击返回按钮
    goBack() {
      console.log('goback')
    }
  }
}
</script>
<style scoped lang='less'>
@import '~@/assets/less/public.less';

// @import '~@assets/less/common.less';
.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.header {
  width: 150%;
  margin: -12px -12px @distance4;
}

.backBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .backC {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}

.j-table-force-nowrap {
  margin-top: @distance1;
}

.btns {
  margin-left: @distance5;
}

.right-btn {
  // float: right;
  // display: flex;
  // justify-content: flex-end;
}

.mg-left {
  margin-left: @distance3;
}

.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}

.filter-num {
  color: @normalFont;
}

.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.margin-btn {
  margin-right: @distance5;
}

.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;

  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}

.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}

.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}

/deep/ .ant-card-body {
  // height: calc(100vh - 214px);
  // overflow: hidden;
  padding: 20px 16px;
}

.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}

div.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 16px;
  box-sizing: border-box;
  padding: 23px 0;
  background: #fff;

  div.itemBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    height: 44px;
    // padding: 0px 60px;
    position: relative;
    border-right: 1px solid #eeeeee;

    div.rightBox {
      text-align: center;
      height: 44px;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      margin-left: 16px;

      div.rightTop {
        font-size: 24px;
        color: #191f25;
        line-height: 24px;
        margin-top: 12px;
      }

      div.rightBot {
        font-size: 14px;
        color: #888888;
      }
    }
  }
}

.topBox .itemBox:last-child {
  border: none;
}

.topSearch {
  padding: 0 0 10px 38px;
}

.table-operator .ant-btn {
  margin: 0 8px -4px 0;
}

/deep/ .ant-modal-footer {
  .ant-btn {
    width: 116px;
  }
}

.pagination-contian {
  padding-left: 30px !important;
}
</style>
